<template>
    <div id="left-chart">
      <div class="box box1">
        <span class="icon top-left-icon"></span>
        <span class="icon top-right-icon"></span>
        <span class="icon bottom-left-icon"></span>
        <span class="icon bottom-right-icon"></span>
        <div class="congestion-index">
          <p>凉州区道路拥堵指数</p>
          <p>{{totalIndex.index | numFilter}}</p>
        </div>
        <div class="speed">
          <p>路网均速</p>
          <p>{{totalIndex.speed | numFilter}}km/h</p>
        </div>

      </div>
      <div class="box box2">
        <span class="icon top-left-icon"></span>
        <span class="icon top-right-icon"></span>
        <span class="icon bottom-left-icon"></span>
        <span class="icon bottom-right-icon"></span>

        <div class="express-way">
          <p>高速道路</p>
          <span v-if="roadIndexList.length">{{roadIndexList[1].speed  | numFilter}}km/h</span>
          <span v-if="roadIndexList.length">{{roadIndexList[1].index   | numFilter}}</span>
        </div>
        <div class="main-way">
          <p>主次干道</p>
          <span v-if="roadIndexList.length">{{roadIndexList[2].speed | numFilter}}km/h</span>
          <span v-if="roadIndexList.length">{{roadIndexList[2].index | numFilter}}</span>
        </div>
        <div class="other-way">
          <p>支路及其它</p>
          <span v-if="roadIndexList.length">{{roadIndexList[3].speed | numFilter}}km/h</span>
          <span v-if="roadIndexList.length">{{roadIndexList[3].index | numFilter}}</span>
        </div>

      </div>
      <h2>
        实时交通指数
      </h2>
      <div class="box box3">
        <span class="icon top-left-icon"></span>
        <span class="icon top-right-icon"></span>
        <span class="icon bottom-left-icon"></span>
        <span class="icon bottom-right-icon"></span>

        <ul>
          <li v-for="(item,index) in lineLegendData" :key="index">
            <div class="legend" :style="{background:colors[index]}"></div>
            <span class="name">{{item.name}}</span>
          </li>
        </ul>
        <div id="countLineDiv">
        </div>

      </div>
    </div>
</template>

<script>

    export default {
        name: 'LeftChart',
        data () {
            return {
              countLine:null,
              colors : ['#7073e9', '#06d4c5', '#e4b12f'],
              lineLegendData:[{name:'今日'},{name:'昨日'},{name:'上周同日'}],
              chartsData:{},
            }
        },
      props:{
        totalIndex:{
          type:Object
        },
        roadIndexList: {
          type: Array,
          default: function () {return []}
        },
        todayIndexData: {
          type: Array
        },
        yestodayIndexData :{
          type: Array
        },
        lastWeekIndexData: {
          type: Array
        }
      },
      filters:{   //过滤器
        numFilter(value) {
         // 截取当前数据到小数点后一位  四舍五入
          let realVal = Number(value).toFixed(1)
          return Number(realVal)
        }
      },
      watch:{
       todayIndexData: function () {
         if(this.todayIndexData.length>0){
           let todayIndex = new Array();
           this.todayIndexData.forEach(function (item) {
             todayIndex.push(item.index);
           })
           this.$set(this.chartsData,'firstData',todayIndex);
        }
        },
       yestodayIndexData : function () {
         if(this.yestodayIndexData.length>0){
           let yesIndex = new Array();
           this.yestodayIndexData.forEach(function (item) {
             yesIndex.push(item.index);
           })
           this.$set(this.chartsData,'secondData',yesIndex);
         }
        },
        lastWeekIndexData : function () {
         if(this.lastWeekIndexData.length>0){
           let laIndex = new Array();
           this.lastWeekIndexData.forEach(function (item) {
             laIndex.push(item.index);
           });
           this.$set(this.chartsData,'thirdData',laIndex);
         }
        },
        chartsData : function () {
          let arr = Object.keys(this.chartsData);
          let len = arr.length;
         //if(len == 3){
            this.lineInit(this.chartsData.firstData,this.chartsData.secondData,this.chartsData.thirdData);
         // }
        }
      },
      mounted(){

      },
      methods:{
          lineInit(data1,data2,data3){
            var _this = this;
            this.countLine =  echarts.init(document.getElementById('countLineDiv'));
            let option = {
              tooltip : {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                },
                textStyle: {
                  align: 'left',
                },
                lineStyle: {

                },
                formatter: function(params) {
                  var name = params[0].name + '点'+'<br>';
                  var result = '';
                  params.forEach(function (item) {
                    if(item.seriesName == _this.lineLegendData[0].name){
                      result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + _this.colors[0] + '"></span>' +" " + item.seriesName + " : " + item.value +"</br>";
                    }
                    if(item.seriesName == _this.lineLegendData[1].name){
                      result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + _this.colors[1] + '"></span>' +" " + item.seriesName + " : " + item.value +"</br>";
                    }
                    if(item.seriesName == _this.lineLegendData[2].name){
                      result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + _this.colors[2] + '"></span>' +" " + item.seriesName + " : " + item.value +"</br>";
                    }

                  });
                  return name+result;
                }
              },
              grid: {
                left: '0%',
                right: '2%',
                bottom: '0%',
                top: '22px',
                containLabel: true
              },
              xAxis : [
                {
                  type : 'category',
                  boundaryGap : false,  //坐标轴俩边留白
                  data : ['06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
                  axisLine: {
                    lineStyle: {
                      type: 'solid',
                      color: '#fff',//左边线的颜色
                      width:'1'//坐标线的宽度
                    }
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#d6e0f2',//坐标值得具体的颜色
                    }
                  },
                  splitLine: {
                    show:false,
                  },
                }
              ],
              yAxis : [
                {
                  type : 'value',
                  axisLine: {
                    lineStyle: {
                      type: 'solid',
                      color:'#fff',
                      width:'1',
                    }
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#d6e0f2',
                    }
                  },
                  splitLine: {
                    show:false,
                  },
                }
              ],
              series : [
                {
                  name:this.lineLegendData[0].name,
                  type:'line',
                  smooth:true,  //光滑的曲线
                  symbol: "none",

                  areaStyle: {normal: {}},
                  data:data1,
                  lineStyle:{
                    normal: {
                      color:this.colors[0],
                      width:4,
                    }
                  },

                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: this.colors[0]
                      }, {
                        offset: 1,
                        color: 'rgba(128, 128, 128, 0.00)'
                      }]),
                      opacity:0.8,
                    }
                  },

                },
                {
                  name:this.lineLegendData[1].name,
                  type:'line',
                  smooth:true,
                  symbol: "none",

                  areaStyle: {normal: {}},
                  data:data2,
                  lineStyle:{
                    normal: {
                      color:this.colors[1],
                      width:4,
                    }
                  },

                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: this.colors[1]
                      }, {
                        offset: 1,
                        color: 'rgba(128, 128, 128, 0.00)'
                      }]),
                      opacity:0.8,
                    }
                  },
                },
                {
                  name:this.lineLegendData[2].name,
                  type:'line',
                  smooth:true,
                  symbol: "none",

                  areaStyle: {normal: {}},
                  data:data3,
                  lineStyle:{
                    normal: {
                      color:this.colors[2],
                      width:4,
                    }
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: this.colors[2]
                      }, {
                        offset: 1,
                        color: 'rgba(128, 128, 128, 0.00)'
                      }]),
                      opacity:0.8,
                    }
                  },
                },]
            };
            this.countLine.setOption(option);
          },
      }
    }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";
    #left-chart {
      position: absolute;
      top: 80px;
      left: 0px;
      width: 460px;
      min-height: 600px;
      pointer-events: auto;
      box-sizing: border-box;
      margin-bottom: 10px;
      h2 {
        @include linearTitle;
      }
      .box {
        position: relative;
        box-sizing: border-box;
        padding: 10px;
        @include borderBlur;
        margin-bottom: 15px;
        font-family: "Microsoft YaHei UI";
        color: #d6e0f2;
        &.box1{
          height: 120px;
          font-size: $font-big;

          .congestion-index{
            width: 49%;
            display: inline-block;
            vertical-align: middle;

            p{
              margin-top: 20px;
              &:nth-child(1){   //第一个p
              font-weight: bold;
              }
            }
          }
          .speed{
            width: 49%;
            display: inline-block;
            vertical-align: middle;
            p{
              margin-top: 20px;
              &:nth-child(1){   //第一个p
                font-weight: bold;
              }
            }
          }
        }
        &.box2{
          height: 120px;
          text-align: left;

          div{
            display: inline-block;
            vertical-align: middle;
            margin-left: 18px;
            margin-top: 26px;

            &.express-way{
              p{
                  font-size:  $font-mid;
              }
              span{
                margin-top: 8px;
                &:nth-child(2){
                  font-size: $font-normal;
                }
                &:nth-child(3){
                  font-size: 26px;
                  font-weight: bold;
                  color: #05d6c9;
                }
              }
            }
            &.main-way{
              p{
                font-size:  $font-mid;
              }
              span{
                margin-top: 8px;
                &:nth-child(2){
                  font-size: $font-normal;
                }
                &:nth-child(3){
                  font-size: 26px;
                  font-weight: bold;
                  color: #05d6c9;
                }
              }
            }
            &.other-way{
              p{
                font-size:  $font-mid;
              }
              span{
                margin-top: 8px;
                &:nth-child(2){
                  font-size: $font-normal;
                }
                &:nth-child(3){
                  font-size: 26px;
                  font-weight: bold;
                  color: #05d6c9;
                }
              }
            }
          }
        }
        &.box3{
          height: 240px;
          position: relative;
            ul {
              height: 20px;
              width: 60%;
              display: inline-block;
              list-style: none;
              margin: 0px;
              padding: 0px;
              position: absolute;
              right:-2px;

              li{
                float: left;
                margin-left: 15px;
                padding: 0;
                .legend{
                  display: inline-block;
                  width: 18px;
                  height: 10px;
                  box-sizing: border-box;
                }
                .name{
                  margin-left: 4px;
                  font-size: 14px;

                }
              }
            }
          #countLineDiv{
            display: inline-block;
            width: 400px;
            height: 200px;
            margin: 0;
            padding: 0;
          }
        }


        .icon {
          position: absolute;
          z-index: 10;
          width: 14px;
          height: 14px;
          &.top-left-icon {
            top: -2px;
            left: -2px;
            background: url("../../../static/images/index/top-left.png") no-repeat left top;
          }
          &.top-right-icon {
            top: -2px;
            right: -2px;
            background: url("../../../static/images/index/top-right.png") no-repeat right top;
          }
          &.bottom-left-icon {
            bottom: -2px;
            left: -2px;
            background: url("../../../static/images/index/left-bottom.png") no-repeat left bottom;
          }
          &.bottom-right-icon {
            bottom: -2px;
            right: -2px;
            background: url("../../../static/images/index/right-bottom.png") no-repeat right bottom;
          }
        }
      }
    }
</style>
